<template>
  <a-card style="height:100%">
     <div class="ringstone-box">
   <div class="top">
    <a-upload :file-list="[]" :before-upload="beforeUpload">
        <a-button type="primary"  ghost :loading="uploadLoading">上传</a-button>
    </a-upload>
     <a-button type="primary" style="margin-left:20px" @click="$router.go(-1)">返回</a-button>
   </div>
    <a-table :columns="columns" :data-source="data"  :pagination="false">
   <template  #level="record">
     <div v-if="standScoreListF.filter(v=>v.ringstone==record.id )">
       <span v-if="standScoreListF.filter(v=>v.ringstone==record.id )[0]&&standScoreListF.filter(v=>v.ringstone==record.id )[0]['priority']==3">高</span>
      <span  v-else-if="standScoreListF.filter(v=>v.ringstone==record.id )[0]&&standScoreListF.filter(v=>v.ringstone==record.id )[0]['priority']==2">中</span>
      <span  v-else-if="standScoreListF.filter(v=>v.ringstone==record.id )[0]&&standScoreListF.filter(v=>v.ringstone==record.id )[0]['priority']==1">低</span>
      <span v-else>未设置</span>
     </div>
     <div v-else> 未设置 </div>
   </template>
    <span slot="action" slot-scope="text, record,index">
      <span v-if="!standScoreListF.filter(v=>v.ringstone==record.id )[0]">
        <a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="setTip(record,3)">
        <template slot="title">
          <p>确定高等级提示音吗 ?</p>
        </template>
        <a href="javascript:" style="padding-right:10px">设为高级别</a>
      </a-popconfirm>
       <a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="setTip(record,2)">
        <template slot="title">
          <p>确定中等级提示音吗 ?</p>
        </template>
        <a href="javascript:" style="padding-right:10px">设为中级别</a>
      </a-popconfirm>
       <a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="setTip(record,1)">
        <template slot="title">
          <p>确定低等级提示音吗 ?</p>
        </template>
        <a href="javascript:" style="padding-right:10px">设为低级别</a>
      </a-popconfirm>
      </span>
       <a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="del(record)">
        <template slot="title">
          <p>确定删除吗 ?</p>
        </template>
        <a href="javascript:" v-if="index>3" style="padding-right:10px">删除</a>
      </a-popconfirm>
    </span>
  </a-table>
  </div>
  </a-card>
</template>

<script>
import { getRingstoneList,delRingstone } from '@/services/user'
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
const columns = [
  {
    title: '文件名称',
    dataIndex: 'fileName',
    key: 'fileName',
  },
  {
    title: '所属等级',
    key: 'level',
      scopedSlots: { customRender: 'level' },
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];



export default {
  name:'soundTipsList',
    data(){
        return {
            data:[
             {
              fileName:"alert1.mp3",
              filePath:"",
              fileSize:"",
              id:"alert1",
              uploadTime:"--"},
              {
              fileName:"alert2.mp3",
              filePath:"",
              fileSize:"",
              id:"alert2",
              uploadTime:"--"},
              {
              fileName:"alert3.mp3",
              filePath:"",
              fileSize:"",
              id:"alert3",
              uploadTime:"--"},
              {
              fileName:"alert4.mp3",
              filePath:"",
              fileSize:"",
              id:"alert4",
              uploadTime:"--"}

            ],
            columns,
            fileList:[],
            uploadLoading:false
        }
    },
    computed:{
      ...mapGetters('user',['userInfo']),
         ...mapState('eventCodeMaintenance', [
      'getStandScoreListLoading',
      'standScoreList', 
    ]),
      standScoreListF() {
      return [...this.standScoreList].sort((a, b) => a.priority - b.priority);
    },
      userId(){
        return this.userInfo?.userId
      }
    },
    methods:{
        ...mapActions('eventCodeMaintenance', [
          'getStandScoreList',
          'standScoreUpdate',
        ]),
        ...mapActions('user',['ac_uploadBell']),
        setTip(record,p){
          console.log(record,p)
           this.standScoreListF[p-1].ringstone = record.id
            this.standScoreSave()
        },
           // 保存全局维护
    standScoreSave() {
      this.standScoreUpdate({
       userId:this.userId,
       scoreData: this.standScoreList,
       scoreType:0+''
      }).then(res => {
        if (res) {
           this.getStandScoreList()
        }
      }).catch(()=>{
        this.$message.warning('保存失败')
      })
    },
         beforeUpload(file) {
            console.log(file)
            this.uploadLoading = true
            this.fileList = [file];
            const { fileList } = this;
            const formData = new FormData();
            fileList.forEach((file) => {     
                formData.append('file', file);
                formData.append('userId', this.userId);
            });
         this.ac_uploadBell(formData).then(res=>{
            this.$message.success('上传成功')
         }).catch((e)=>{
            this.$message.success('上传失败')
         }).finally(()=>{
            this.uploadLoading = false
         })
     
        },
        del(d){
          delRingstone({
            id:d.id
          }).then(res=>{
            if(res.code==200){
              this.getList()
              this.$message.success('删除成功')
            }else{
              this.$message.warning('删除失败')
            }
          })
        },
        getList(){
            getRingstoneList().then(res=>{
             if(res.code ===200){
              console.log(res.data)
              this.data.push(...res.data)
             }
            })
        }
    },
    created(){
     this.getList()
     this.getStandScoreList()
    }
}
</script>

<style lang="less" scoped>
.ringstone-box{
    padding: 20px;
    .top{
    padding-bottom: 15px;
    display: flex;
    }
}
</style>